<template>
  <el-card body-style="min-height: 86vh">
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="单位名称" prop="unit" align="center"></el-table-column>
      <el-table-column label="备注" prop="remark" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'primary' : 'danger'">{{
            row.status === 1 ? "启用" : "禁用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button v-if="handleShowOperation(row)" type="primary" @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-popconfirm
            v-if="handleShowOperation(row)"
            title="你确定要删除该配件单位?"
            @confirm="handleDelete({ id: row.id })"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" @submit="handleSubmit()">
      <el-form ref="formRef" :model="form" label-width="120" :rules="rules">
        <el-form-item label="单位名称" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="form.status"
            inline-prompt
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import {
  getPartsUnitPageApi,
  addPartsUnitApi,
  editPartsUnitApi,
  deletePartsUnitApi
} from "@/api/repair";
import usePermission from "@/hooks/usePermission";

const { hasPermission } = usePermission();

const { tableData,currentPage, limit, total, handleGetTableList, handleDelete } = useInitTable({
  getTableList: getPartsUnitPageApi,
  deleteData: deletePartsUnitApi
});

const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      unit: "",
      remark:"",
      status: 1
    },
    rules: {
      unit: [
        {
          required: true,
          message: "请输入配件单位",
          trigger: "blur"
        }
      ]
    },
    createData: addPartsUnitApi,
    updateData: editPartsUnitApi,
    success: () => {
      handleGetTableList(currentPage.value);
    }
  }
);

const handleShowOperation = (val: any) => {
  if (hasPermission("serve:unit:admin") && val.isSystem === 1) {
    return true;
  } else if (hasPermission("serve:unit:repair") && val.isSystem === 0) {
    return true;
  } else {
    return false;
  }
};
</script>
<style scoped lang="scss"></style>
